<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>获取数据</button>
    <ul id="list"></ul>

    <script>
        let btn = document.querySelector('button');
        let list = document.querySelector('#list');

        // 当期这次请求所获取到数据总条数
        let n = 0;

        btn.onclick = function() {
            getUsers();
        }

        function getUsers() {
            let source = new EventSource('/users');

            source.addEventListener('newUsers', e => {
                console.log(e.data);

                let data = JSON.parse(e.data).users;
                // console.log(data);
                n = data.length;

                list.innerHTML = '';

                data.forEach(d => {
                    let li = document.createElement('li')
                    li.innerHTML = d.username
                    list.appendChild(li)
                })
            });

;
        }
    </script>
</body>
</html>
